<!-- 1 定义组件模版 --> 
<template>
    <div style="padding: 10px;   background-color: #52acb3; box-shadow: 0 0 3px pink; border-radius: 5px;">
       <h3>我是父元素,provice-parent</h3>
       <p>
          <div class="block">
             学校宣传处
             <input type="text" v-model="propagandaMessage" /> <button type="button" @click="publicMessage">发布</button>
             <ol>
                <li v-for="msg in  allMsg">
                   已发布消息：{{ msg }}
                </li>
             </ol>
          </div>
          <div class="block">
                蓝桥杯报名处
                <ol>
                   <li v-for="sign in  signUpList">
                      已报名，学号 {{ sign }}
                   </li>
                </ol>
          </div>
       </p>
       <ClassRoom></ClassRoom>
    </div>
 </template> 
 
 <!-- 2 定义组件逻辑 -->
 <script setup lang="ts" name="School">
 import { ref, reactive, provide } from 'vue'
 import ClassRoom from './ClassRoom.vue'
 
 let propagandaMessage = ref('')
 let allMsg = reactive<string[]>([])
 
 let signUpList:number[] = reactive([])
 
 
 //方法
 //发布学校通知
 function publicMessage() {
    allMsg.push(propagandaMessage.value)
    // propagandaMessage.value = ''
 }
 
 //用于接受孙孙节点发送过来的数据
 function signUp(studentNum:number){
    signUpList.push(studentNum)
 }
 
 provide('allMsg', allMsg)
 provide('signUp', signUp)

 
 
 </script> 
  
 <!-- 3 定义样式 -->
 <style scoped>
 .block{
    display: inline-block;
    width: 45%;
    margin: 0 5px;
    vertical-align: top;
    border: solid 1px grey;
    padding-left: 10px;
 
 }
 </style>